<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="http://localhost:8080/fan/">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="icon" href="https://zhangxu-1023.oss-cn-nanjing.aliyuncs.com/images/logo/minilogo.png">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/shop_list.css">
    <link rel="stylesheet" href="css/details/details_header.css">


</head>
<body>
<!--                     头部                         -->
<div class="header">
    <div class="top-nav ">
        <div class="layui-main top-main layui-row">
            <div class="layui-col-xs4">
                <span>&nbsp</span>
            </div>
            <div class="layui-col-xs4">
                <span>&nbsp</span>
            </div>
            <div class="layui-col-xs4">
                <ul class="layui-nav" lay-filter="">
                    <li class="layui-nav-item" ><a href="customer/user_details" class="title" th:text="${cusName}">登录/注册</a></li>
                    <li class="layui-nav-item" ><a href="#" class="title">帮助中心</a></li>
                    <li class="layui-nav-item">
                        <a href="javascript:;" class="title">我的饭团</a>
                        <dl class="layui-nav-child"> <!-- 二级菜单 -->
                            <dd><a href="customer/getAllOrder?status=3&pageNum=1">订单中心</a></dd>
                            <dd><a href="customer/getAllCoupon?status=1&pageNum=1">我的优惠券</a></dd>
                            <dd><a href="customer/getShopCollect">我的收藏</a></dd>
                        </dl>
                    </li>

                </ul>
            </div>
        </div>
    </div>
    <div class="layui-row header-tip">
        <!--      logo      -->
        <div class="layui-col-xs3 logo-input">
            <a href="shop/shopsift/1" title="饭团网" class="logo-img">
                <img src="https://zhangxu-1023.oss-cn-nanjing.aliyuncs.com/images/logo/mylogo.png"  width="200" height="72">
            </a>
        </div>
        <!--    搜索    -->
        <div class="layui-col-xs6 search-box">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item searchbox-input">
                    <div class="layui-input-block" style="margin-left: 10px">
                        <input style="border: 2px solid rgb(255,107,55);width: 80%;display: block;float: left" type="text" name="title" autocomplete="off"
                               placeholder="点此进入美食猩球" class="layui-input" id="es_input">
                        <div class="layui-btn-container" style="display: block;float: left">
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger search-btn" id="es_btn">去觅食</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="layui-main">
    <div class="main">
        <!--                     筛选区                         -->
        <div class="fifter">
            <div class="Condition">
                <label>分类：</label>
                <div class="Select fifter1">
                    <a href="javascript:void(0)" class="fifters active"><span>所有</span></a>
                    <a th:href="'javascript:;'" onclick="download_method()" class="fifters" th:each="foodtype,status:${foodtypes}" >
                        <span th:text="${foodtype.foodType}">汉堡</span>

                    </a>
                </div>
            </div>

            <div class="Condition">
                <label>人均消费：</label>
                <div class="Select fifter2">
                    <a href="javascript:;" onclick="download_method()" class="fifters active"><span>所有</span></a>
                    <a href="javascript:;" onclick="download_method()" class="fifters"><span>100元以下</span></a>
                    <a href="javascript:;" onclick="download_method()" class="fifters"><span>100-200元</span></a>
                    <a href="javascript:;" onclick="download_method()" class="fifters"><span>200-400元</span></a>
                    <a href="javascript:;" onclick="download_method()" class="fifters"><span>400-600元</span></a>
                    <a href="javascript:;" onclick="download_method()" class="fifters"><span>600-800元</span></a>
                    <a href="javascript:;" onclick="download_method()" class="fifters"><span>800-1000元</span></a>
                    <a href="javascript:;" onclick="download_method()" class="fifters"><span>1000元以上</span></a>
                </div>
            </div>
        </div>
        <div class="pro-main">
            <!--                     列表区                         -->
            <div class="prolist">
                <div class="sort">
                    <div class="sort2">
                        <a href="javascript:;" onclick="download_method()" class="a_active">默认</a>
                        <a href="javascript:;" onclick="download_method()">价格</a>
                        <a href="javascript:;" onclick="download_method()">好评最多</a>
                    </div>
                </div>
                <div class="pro">
                    <ul>
                        <li th:each="shop:${shop.records}">
                            <a th:href="'http://localhost:8080/fan/shop/'+${shop.shopId}" class="proimg"><img th:src="${shop.shopMainImg}"></a>
                            <h4><a th:href="'http://localhost:8080/fan/shop/'+${shop.shopId}" th:text="${shop.shopName}">熊猫不走生日蛋糕（苏州店）</a></h4>
                            <label class="proscoreimg"><i></i><i></i><i></i><i></i><i></i></label>
                            <label class="proscore" th:text="${shop.shopScore}">5</label><label>分</label>
                            <script>
                                var score = $(".proscore:last").text();
                                for (var i=1;i<=5;i++) {
                                    if(score >= i) {
                                        $(".proscoreimg:last").children().eq(i-1).css("background-image","url(https://zhangxu-1023.oss-cn-nanjing.aliyuncs.com/images/filter_page/2022-10-20/2937015492394b9eb733593d649ad0e0index-wellreceived-icon.svg)");
                                    } else if( score > (i-1) && score < i ) {
                                        $(".proscoreimg:last").children().eq(i-1).css("background-image","url(https://zhangxu-1023.oss-cn-nanjing.aliyuncs.com/images/details_shop/2022-10-20/banxing.svg)");
                                    } else {
                                        $(".proscoreimg:last").children().eq(i-1).css("background-image","url(https://zhangxu-1023.oss-cn-nanjing.aliyuncs.com/images/details_shop/2022-10-20/kongxing.svg)");
                                    }
                                }
                            </script>
<!--                            <a th:href="'http://localhost:8080/fan/shop/'+${shop.shopId}" class="comment">-->
<!--                                <span>1234</span>-->
<!--                                <span>条评论</span>-->
<!--                            </a>-->
                            <span class="sty"><a th:href="'http://localhost:8080/fan/shop/'+${shop.shopId}" th:text="${shop.shopAddressDetail}">观前街地区</a></span>
                            <span class="sty">人均<a th:href="'http://localhost:8080/fan/shop/'+${shop.shopId}"> ￥<span th:text="${shop.shopAvgCost}">141.0</span></a></span>
                            <span class="sty">营业时间：<a th:href="'http://localhost:8080/fan/shop/'+${shop.shopId}"><span th:text="${shop.shopOpenTime}+' - '+${shop.shopCloseTime}"></span></a></span>
                        </li>


                    </ul>

                    <!-- 分页 -->
                    <input type="hidden" id="pagenum" th:value="${shop.current}">
                    <input type="hidden" id="total" th:value="${shop.total}">
                    <div class="paging" th:if="${#lists.size(shop.records)} eq 0">
                        <p>暂无符合条件的店铺</p>
                    </div>
                    <div class="paging" th:if="${#lists.size(shop.records)} gt 0">
                        <div id="demo7"></div>
                    </div>

                </div>
            </div>
        </div>



        <!--                     推荐区                         -->
        <div class="recommend">
            <ul>
                <h4><a href="http://localhost:8080/fan/secondKill/getAllPro">限时优惠</a></h4>


                <li th:each="skfood:${skfood}">
                    <a  th:href="'getSecondOrderDetails?secondId='+${skfood.key.secondKillId}">
                        <img th:src="${skfood.value.foodMainImg}">
                        <h6 th:text="${skfood.value.foodName}">熊猫不走生日蛋糕（苏州店）</h6>
                        <span th:text="'限量：'+${skfood.key.secondKillStock}"></span>
                    </a>
                    <span><label>￥</label><label th:text="${skfood.key.secondKillPrice}">188.0</label></span>
                    <a th:href="'getSecondOrderDetails?secondId='+${skfood.key.secondKillId}" class="seckillbtn">立即抢购</a>
                </li>

            </ul>
        </div>
    </div>
</div>
<iframe align="center" width="100%" height="560px" src="details/details_bottom.html"
        frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no">
</iframe>


<script src="layui/layui.js"></script>
<script src="js/shop_list.js"></script>
<script src="js/elasticsearch_util.js"></script>

</body>
</html>
